<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #box {
        width: 200px;
        height: 300px;
        background-image: url(111.png);
        text-align: center;
        position: relative;
      }
      #box h2{
          color: white;
      }
      #box p{
          color: white;
      }
      .box1 {
        width: 40px;
        height: 40px;
        background-color: rgba(0, 0, 0, 0.603);
        float: left;
        line-height: 40px;
        text-align: center;
        color: white;
      }
      .box2 {
        width: 40px;
        height: 40px;
        background-color: rgba(0, 0, 0, 0.603);
        float: left;
        line-height: 40px;
        text-align: center;
        color: white;
      }
      .box3 {
        width: 40px;
        height: 40px;
        background-color: rgba(0, 0, 0, 0.603);
        float: left;
        line-height: 40px;
        text-align: center;
        color: white;
      }
      span {
        display: block;
        position: absolute;
        bottom: 80px;
        left: 50px;
        color: white;
      }
      .out {
        width: 200px;
        height: 40px;
        position: absolute;
        bottom: 4px;
        left: 40px;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <h2>倒计时</h2>
      <p>COUNT DOWN</p>
      <span>距离结束还剩</span>
      <div class="out">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
      </div>
    </div>
    <script>
      // 第二题：模拟京东倒计时，按照图示进行布局和效果实现（请将目标时间设置一个较大的值）（20分）
      var outSide = document.querySelector(".out");
      var box1 = document.querySelector(".box1");
      var box2 = document.querySelector(".box2");
      var box3 = document.querySelector(".box3");
      //   console.log(boxs);
      var time1 = new Date("2022-1-28 17:00:20");
      let timer = setInterval(function () {
        var time2 = new Date();
        // console.log(time2);

        var res = time1 - time2;
        // console.log(res);
        var s = parseInt((res / 1000) % 60); //miao
        // s = toString(s);
        // console.log(s);
        var m = parseInt((res / 1000 / 60) % 60); // fen
        // m = toString(m);
        var h = parseInt(res / 1000 / 60 / 60);
        // h = toString(h);
        box1.innerHTML = h + ":";
        box2.innerHTML = m + ":";
        box3.innerHTML = s;

        if (parseInt(res) <= 0) {
          clearInterval(timer);
          outSide.innerHTML = "00+00+00";
        }
      }, 1000);
    </script>
  </body>
</html>
